<template>
  <el-card class="fixed-card-left">
    <div class="card-top" style="display: flex; justify-content: space-between">
      <el-tabs v-model="activeTab" class="nav-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="待办" name="todo">
          <template #label>
            <span class="custom-tabs-label">
              <img
                src="@/assets/images/backlog.jpg"
                alt=""
                v-if="activeTab === 'todo'"
              />
              <img src="@/assets/images/have.png" alt="" v-else />
              <span class="custom-tab-text">待办</span>
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="已办" name="done">
          <template #label>
            <span class="custom-tabs-label">
              <img
                src="@/assets/images/backlog.jpg"
                alt=""
                v-if="activeTab === 'done'"
              />
              <img src="@/assets/images/have.png" alt="" v-else />
              <span class="custom-tab-text">已办</span>
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="completed">
          <template #label>
            <span class="custom-tabs-label">
              <img
                alt=""
                src="@/assets/images/completed_.png"
                v-if="activeTab === 'completed'"
              />
              <img src="@/assets/images/completed.png" alt="" v-else />
              <span class="custom-tab-text">已完成</span>
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>

    </div>

    <el-table
      :data="todoList"
      style="width: 100%; height: 270px"
      show-overflow-tooltip
      header-row-class-name="custom-red-header"
    >
      <el-table-column
        prop="title"
        label="标题"
        header-align="left"
      ></el-table-column>
      <el-table-column
        prop="creatorName"
        label="提交人"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="submitTime"
        label="提交时间"
        width="140"
      ></el-table-column>
      <el-table-column
        prop="nowProcess"
        label="当前环节"
        width="120"
      ></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button
            v-if="activeTab == 'todo' && scope.row.button == true"
            size="small"
            type="text"
            @click="$emit('process', scope.row.processUrl)"
          >
            处理
          </el-button>
          <el-button
            v-else-if="activeTab != 'todo'"
            size="small"
            type="text"
            @click="$emit('process', scope.row.seeUrl)"
            >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
        class="pagination"
        :total="pagination.total"
        :page="pagination.page"
        :limit="pagination.limit"
        :pageSizes="pagination.pageSizes"
        @handleSizeChange="$emit('size-change', $event)"
        @handleCurrentChange="$emit('current-change', $event)"
      />
  </el-card>
</template>

<script setup>
import Pagination from "@/components/Pagination/pageination.vue";
import { ref, watch } from "vue";

const props = defineProps({
  activeTab: {
    type: String,
    default: "todo",
  },
  todoList: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 10,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50],
  },

  pagination: {
    type: Object,
    default: () => ({
      total: 10,
      page: 1,
      limit: 10,
      pageSizes: [10, 20, 30, 50],
    }),
  },
});

const emit = defineEmits([
  "tab-change",
  "size-change",
  "current-change",
  "process",
]);

const activeTab = ref(props.activeTab);
const page = ref(props.page);
const limit = ref(props.limit);

watch(
  () => props.activeTab,
  (val) => {
    activeTab.value = val;
  }
);

watch(
  () => props.page,
  (val) => {
    page.value = val;
  }
);

watch(
  () => props.limit,
  (val) => {
    limit.value = val;
  }
);

const handleTabClick = (tab) => {
  emit("tab-change", tab.props.name);
};
</script>

<style lang="scss" scoped>
@import "../../style/HR.scss";

/* 深度选择器穿透 */
:deep(.custom-red-header th) {
  background-color: #fff !important;
  text-align: left !important;
  font-weight: bold;
  color: var(--Primary4-500, #6f7b90);
  font-family: "Source Han Sans CN";
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: normal !important;
}


.fixed-card-left {
  border-radius: 8px;
  border: 1px solid #fff;
  background: #fcfcfd;

  /* 阴影1 */
  box-shadow: -38px 83px 25px 0px rgba(168, 168, 189, 0),
    -24px 53px 23px 0px rgba(168, 168, 189, 0.01),
    -14px 30px 20px 0px rgba(168, 168, 189, 0.02),
    -6px 13px 15px 0px rgba(168, 168, 189, 0.03),
    -2px 3px 8px 0px rgba(168, 168, 189, 0.04) !important;
  box-shadow: 100px 200px 300px !important;
}

/* 去除所有默认边框 */
.el-table--border,
.el-table--group {
  border: none !important;
}
</style>
